<template>
  <div>
    <el-dialog
        title="反馈信息"
        v-model="dialogVisible"
        :width="device==='desktop' ? '30%':'95%'"
    >
      <el-input v-model="note" type="textarea" show-word-limit maxlength="150"></el-input>
      <el-switch :disabled="disabled" v-model="mask" active-color="#13ce66" inactive-color="#ff5c50" inactive-text="实名" active-text="匿名"/>
      <template #footer>
    <span class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="writeNote">提 交</el-button>
    </span>
      </template>
    </el-dialog>
    <div style="position: fixed;top: 400px;right:20px;z-index: 100">
            <div style="display: flex;">
              <el-tooltip
                  class="item"
                  effect="dark"
                  content="留言反馈"
                  placement="left"
              >
                <el-button @click="dialogVisible=true" type="primary" class="iconfont icon-liuyan-copy" size="large" circle></el-button>
              </el-tooltip>
            </div>
            <br/>
            <div>
              <el-tooltip
                  class="item"
                  effect="dark"
                  content="咨询电话：12332931280"
                  placement="left"
              >
              <el-button type="primary" class="iconfont icon-dianhuazixun" size="large" circle></el-button>
              </el-tooltip>
            </div>
    </div>
<!--走马灯-->
<carousel :imageList="imageList"/>
  <br/>
<!--  新闻·公告-->
  <div>
    <h1>新闻 · 公告</h1>
  </div>
 <el-row :gutter="10" justify="space-between">
   <el-col :xs="24" :sm="24" :lg="12">
     <el-card class="box-card" shadow="never">
       <template #header>
         <router-link class="RLink" to="/article/news">
           景区新闻
         </router-link>
       </template>
       <div v-if="news.length>0">
         <div v-for="n in news" :key="n.articleId" class="textItem">
           <router-link class="RLink" :to="'/showArticle/'+n.articleId">{{ n.articleTitle.substring(0,10) }}...</router-link>
           <span>{{n.publishTime.substring(0,10)}}</span>
         </div>
       </div>
       <div v-else>暂无新闻。。。</div>
     </el-card>
   </el-col>
   <el-col :xs="24" :sm="24" :lg="12" >
     <el-card class="box-card announce" shadow="never">
       <template #header>
         <router-link class="RLink" to="/article/announce">
           景区公告
         </router-link>
       </template>
       <div v-if="announce.length>0">
         <div v-for="a in announce" :key="a.articleId" class="textItem">
           <router-link class="RLink"  :to="'/showArticle/'+a.articleId">{{ a.articleTitle.substring(0,10) }}...</router-link>
           <span>{{a.publishTime.substring(0,10)}}</span>
         </div>
       </div>
       <div v-else>暂无公告。。。</div>
     </el-card>
   </el-col>
 </el-row>
  <h1>标志景点</h1>
  <hot-scenic :scenic="scenic" />
  <router-link class="RLinkS" to="/scenic/detail">
    更多详情可前往景区浏览页面观看>
  </router-link>
  </div>
</template>

<script>
import {getArticleByPage, getHorse, getScenicAndImage, insertNote} from "@/api/multimedia";
import First from '@/assets/first.jpg'
import Carousel from "@/components/Carousel";
import HotScenic from "@/views/scenic/hotScenic";
import {mapGetters} from "vuex";
export default {
  name: "userHome",
  components: {HotScenic, Carousel},
  data(){
    return{
      disabled:false,
      mask:true,
      note:'',
      dialogVisible:false,
      imageList:[
        {imageId:0,imageName:'第零张图片',imageType:0,imageUrl:First,scenicId:null}
      ],
      news:[],
      announce:[],
      scenic:[],
    }
  },
  async created() {
    this.Horse()
    this.news = await this.getNews(1)
    this.announce=await this.getNews(0)
  },
  mounted() {
    this.getScenic()
    if (this.username==='')
      this.disabled=true
  },
  computed:{
    ...mapGetters(['device','username'])
  },
  methods:{
    writeNote(){
      let userName=this.username
      if (this.mask){
        userName='匿名'
      }
       insertNote({userName, noteContent:this.note}).then(()=>{
       this.$message({
         type:'success',
         message:'感谢您的反馈'
       })
       this.note=''
       this.dialogVisible=false
     }).catch(()=>{
       this.$message({
         type:'error',
         message:'留言失败，请稍后重试'
       })
       this.dialogVisible=false
     })
    },
    getScenic(){
      getScenicAndImage(1,9).then(res=>{
        this.scenic=res.data.scenicList
      })
    },
    Horse(){
      getHorse().then(response =>{
        const {image}=response.data
        this.imageList=this.imageList.concat(image)
      })
    },
    async getNews(articleType){
      return new Promise( (resolve, reject)=>{
        getArticleByPage(1,10,articleType).then(res=>{
          resolve(res.data.news)
        }).catch(error=>{
          reject(error)
        })
      })

    }
  }
}

</script>

<style lang="less" scoped>

/deep/ element.style {
  height: 18.4px;
  width: 1490.4px;
}
.RLink{
  text-decoration: none;
  color: #fff;
  &:hover{
    color: #666;
  }
}
.RLinkS{
  text-decoration: none;
  color: #000000;
  &:hover{
    color: #666;
  }
}
.box-card{
  background-color: #279fba;
  color: #fff;
  min-height: 400px;
}
.textItem{
  padding: 5px;
  display: flex;
  justify-content: space-between;
}
.announce{
  background-color: #ef4a44;
}
h1 {
  display: block;
  color: #666666;
  font-size: 2.25rem;
  font-weight: bolder;
  font-family:muli, sans-serif, Tahoma, Geneva, Arial, "Microsoft YaHei", "微软雅黑";
}
</style>
